<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';

import { IconifyIcon } from '@vben/icons';

const router = useRouter();

// 功能模块列表
const modules = ref([
  {
    key: 'hand-card',
    title: '手牌中心',
    description: '手牌管理、开牌、换牌、状态管理',
    icon: 'mdi:card-account-details',
    color: '#1890ff',
    path: '/spa/hand-card',
  },
  {
    key: 'room-status',
    title: '房态中心',
    description: '房间状态、房态管理、房间分配',
    icon: 'mdi:bed',
    color: '#52c41a',
    path: '/spa/room-status',
  },
  {
    key: 'technician',
    title: '技师中心',
    description: '技师管理、排班、服务记录',
    icon: 'mdi:account-group',
    color: '#722ed1',
    path: '/spa/technician',
  },
  {
    key: 'member',
    title: '会员中心',
    description: '会员管理、积分、消费记录',
    icon: 'mdi:account-heart',
    color: '#fa8c16',
    path: '/spa/member',
  },
  {
    key: 'marketing',
    title: '营销中心',
    description: '营销活动、优惠券、推广管理',
    icon: 'mdi:chart-line',
    color: '#eb2f96',
    path: '/spa/marketing',
  },
  {
    key: 'report',
    title: '报表中心',
    description: '数据统计、报表分析、经营分析',
    icon: 'mdi:file-document',
    color: '#13c2c2',
    path: '/spa/report',
  },
  {
    key: 'inventory',
    title: '库存中心',
    description: '商品库存、采购管理、库存预警',
    icon: 'mdi:package-variant',
    color: '#faad14',
    path: '/spa/inventory',
  },
  {
    key: 'system',
    title: '系统设置',
    description: '系统配置、权限管理、参数设置',
    icon: 'mdi:cog',
    color: '#666666',
    path: '/spa/system',
  },
  {
    key: 'shift',
    title: '交接班',
    description: '班次管理、交接记录、工作交接',
    icon: 'mdi:clock-outline',
    color: '#f5222d',
    path: '/spa/shift',
  },
]);

const navigateToModule = (path: string) => {
  router.push(path);
};
</script>

<template>
  <div class="spa-dashboard">
    <div class="dashboard-header">
      <h1>温泉洗浴管理系统</h1>
      <p>欢迎使用温泉洗浴管理系统，请选择要使用的功能模块</p>
    </div>

    <div class="modules-grid">
      <div
        v-for="module in modules"
        :key="module.key"
        class="module-card"
        @click="navigateToModule(module.path)"
      >
        <div class="module-icon" :style="{ backgroundColor: module.color }">
          <IconifyIcon :icon="module.icon" />
        </div>
        <div class="module-content">
          <h3>{{ module.title }}</h3>
          <p>{{ module.description }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.spa-dashboard {
  min-height: 100vh;
  padding: 24px;
  background-color: #f5f5f5;
}

.dashboard-header {
  margin-bottom: 32px;
  text-align: center;
}

.dashboard-header h1 {
  margin-bottom: 8px;
  font-size: 32px;
  color: #333;
}

.dashboard-header p {
  margin: 0;
  font-size: 16px;
  color: #666;
}

.modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.module-card {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 24px;
  cursor: pointer;
  background: white;
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.module-card:hover {
  border-color: #d9d9d9;
  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
  transform: translateY(-4px);
}

.module-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 12px;
}

.module-icon :deep(svg) {
  width: 32px;
  height: 32px;
  color: white;
}

.module-content {
  flex: 1;
}

.module-content h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.module-content p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #666;
}
</style>
